<template>
    <div class="watermeter">
        <Tabs type="card" :animated="false" v-model="currentName"  @on-click="changeTab">
            <TabPane label="水表信息" name="info">
                <Card class="watermeter-base" dis-hover :padding='0' v-if="currentName === 'info'">
                    <p slot='title'>
                        基本信息
                    </p>
                    <Row class='watermeter-base-row'>
                        <Col span='8' class='watermeter-base-row-item'>
                            <Row type='flex' align='middle' class='watermeter-base-row-item-line'>
                                <strong>基本信息</strong>
                            </Row>
                            <Row class='watermeter-base-row-item-line'>
                                <i>名称：</i>
                                <Input style='width:50%' v-model='watermeter_name' :readonly='edit'></Input>
                                <Button type='ghost' class="margin-left-10 yd-button" v-show='edit==true' @click='edit=!edit' v-pmis="23">修改</Button>
                                <Button class=" margin-left-10 yd-button" v-show='edit==false' @click='ok'>保存</Button>
                            </Row>
                            <Row class='watermeter-base-row-item-line'>
                                <i>序列号:</i>
                                {{room.sn}}
                            </Row>
                            <!-- <Row class='watermeter-base-row-item-line'>
                                <i>供应商：</i>
                                {{room.manufactory}}
                            </Row> -->
                            <Row class='watermeter-base-row-item-line'>
                                <i>uuid：</i>
                                {{room.uuid}}
                            </Row>
                            <Row class='watermeter-base-row-item-line'>
                                <i>状态：</i>
                                <span class="margin-right-10">{{room.onoff == 1?'在线':'离线'}}</span>（更新时间:{{room.onoff_time | dateFrm}}）
                            </Row>
                            <Row class='watermeter-base-row-item-line'>
                                <i>型号：</i>
                                {{room.type || '-'}}
                            </Row>
                            <Row class='watermeter-base-row-item-line'>
                                <i>绑定网关:</i>
                                {{room.parents[0] ? room.parents[0].description : '-'}}
                            </Row>
                            <Row class='watermeter-base-row-item-line'>
                                <i>绑定时间：</i>
                                {{room.bind_time | dateFrm}}
                            </Row>
                        </Col>
                        <Col span='8' class='watermeter-base-row-item' style='border-right:none'>
                            <Row type='flex' align='middle' class='watermeter-base-row-item-line'>
                                <strong>保修信息</strong>
                            </Row>
                            <Row class='watermeter-base-row-item-line'>
                                <strong>保修起始时间：</strong>
                                {{room.guarantee_begin}}
                            </Row>
                            <Row class='watermeter-base-row-item-line'>
                                <strong>保修截止时间：</strong>
                                {{ room.guarantee_end}}
                            </Row>
                        </Col>
                        <!-- <Col span='8' class='watermeter-base-row-item' style='border-right:none'>
                            <Row type='flex' align='middle' class='watermeter-base-row-item-line'>
                                <i>当前水表读数</i>
                            </Row>
                            <Row class='watermeter-base-row-item-line'>
                                <i style="margin-right:10px">{{Math.round(room.amount*10)/10}}吨</i>
                                (更新时间{{room.amount_time | dateFrm}}）
                            </Row>
                        </Col> -->
                    </Row>
                </Card>
            </TabPane>
            <TabPane label="水表读数" name="waterComsuming">
                <eleWaterRecord :room="room" :recordType="1" v-if="currentName === 'waterComsuming'"></eleWaterRecord>
            </TabPane>
            <TabPane label="操作记录" name="operation">
                <roomOperate :room="room" :operateType="'watermeter'" v-if="currentName === 'operation'"></roomOperate>
            </TabPane>
            <TabPane label="异常记录" name="unusual">
                <roomUnnormal :room="room" :unnormalType="'WATERMETER_HOT'" v-if="currentName === 'unusual'"></roomUnnormal>
            </TabPane>
            <TabPane label="第三方接口调用记录" name="openapi-log">
                <openapi-log v-if="loadedComponent.includes('openapi-log')" device-type="watermeter" :device-id="waterMeters.id" :room-id="roomId"></openapi-log>
            </TabPane>
        </Tabs>
    </div>
</template>
<script>
import roomUnnormal from './roomUnnormal'
import { http, api } from '@/libs/http'
import roomOperate from './roomOperate'
import eleWaterRecord from './eleWaterRecord'
import dayjs from 'dayjs'
import { refreshRoom } from './room-list/util'
import openapiLog from '../log/openapi-log'

export default {
  name: 'watermeter',
  props: {
    homeId: Number,
    waterMeters: Object
  },
  components: {
    roomUnnormal,
    roomOperate,
    eleWaterRecord,
    openapiLog
  },

  watch: {
    currentName (newVal) {
      if (newVal === 'info') {
        this.refresh()
      }
    }
  },

  created () {
    this.room = this.waterMeters
    const { roomId, id, description } = this.waterMeters

    this.watermeter_name = description
    this.roomId = roomId // 房间id
    this.deviceId = id // 设备id
  },

  data () {
    return {
      loadedComponent: [],
      room: {}, // 水表数据
      roomId: 0, // 房间id
      deviceId: 0, // 水表的设备id
      currentName: 'info', // 当前tab的name
      edit: true,
      cutout: false,
      clear: false,
      recharge: false,
      watermeter_name: '',
      restclean: false,
      watermeterset: false,
      partition: false
    }
  },
  computed: {
    permissions () {
      if (localStorage.permission) {
        return JSON.parse(localStorage.permission)
      } else {
        return {}
      }
    }
  },
  methods: {
    /**
         * 点击tab按需刷新
         * @param {String} name 被点击的tab的name
         */
    changeTab (name) {
      this.currentName = name
      if (!this.loadedComponent.includes(name)) this.loadedComponent.push(name)
    },

    /**
         * 重新获取水表信息
         */
    refresh () {
      http.request(this, api.watermeter_info, [this.roomId, this.deviceId], null, (res, err) => {
        if (!res || err) {
          return
        }

        this.room = { ...res, id: this.deviceId, roomId: this.roomId }
      })
    },

    ok () {
      this.edit = !this.edit
      let room = this.room
      http.request(this, api.device_update, [room.roomId, room.id], { description: this.watermeter_name }, (res, err) => {
        if (!res || err) {
          this.watermeter_name = this.room.description
          return
        }
        refreshRoom(this.homeId, room.roomId)
        this.$Message.success('修改成功')
      })
    },

    getDetail () {
      http.request(this, api.gateway_info, [16, 2], null, res => {
        this.gateway_info = res
      })
    }
  },
  filters: {
    dateFrm: function (el) {
      if (el === -1 || !el) {
        return ' - '
      }
      return dayjs(el).format('YYYY-MM-DD HH:mm:ss')
    },
    dateFrm2 (el) {
      return dayjs(el)
        .add(2, 'years')
        .format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>
<style lang='less' scoped>
@import '../../styles/common.less';
.watermeter {
    &-base {
        background-color: #fff;
        &-row {
            padding: 10px 0;
            &-item {
                border-right: 1px solid #bbbec4;
                &-line {
                    padding: 15px 0 5px 20px;
                    font-size: 14px;
                    color: #000000;
                }
            }
            &-action {
                padding: 9px 0 5px 20px;
                &-button {
                    width: 100px;
                    margin-right: 5px;
                }
            }
        }
    }
}
i{
    font-style: normal
}
</style>